<template>
    <div class="mainapp">

    <div id="formdemo01">
        <el-row :gutter="12">
     <el-form  :model="formInline" class="demo-form-inline">
         
              <el-col :span="5">
         <el-form-item label="姓名:">
    <el-input class="input1" v-model="formInline.name"></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="5">
  <el-form-item label="身份证号:">
    <el-input v-model="formInline.card" ></el-input>
  </el-form-item>
  </el-col>
   <el-col :span="5">
  <el-form-item label="年龄:">
    <el-input v-model="formInline.age" ></el-input>
  </el-form-item>
   
  </el-col>
  <el-col :span="5">
  <el-form-item label="科室:">
    <el-input v-model="formInline.departmentname" ></el-input>
  </el-form-item>
  </el-col>
  
   <el-col  :span="5">
  <el-form-item label="医生:">
    <el-input v-model="formInline.doctorname" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item label="电话:">
    <el-input v-model="formInline.telephone" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item label="挂号费:">
    <el-input v-model="formInline.cost" ></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="5">
   <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
   </el-col>
   <el-row  :gutter="20">
         <el-col :span="12" :offset="8">
            <el-button  type="primary" @click="bingyinDialogVisible = true"  icon="el-icon-edit" >填写病因</el-button>
        <el-button type="primary" @click="huajiaDialogVisible = true" icon="el-icon-check">开始划价</el-button> 
             </el-col>
            </el-row>
</el-form>
  </el-row>

    
 </div>  
 <div>
    <el-dialog title="填写病因" :visible.sync="bingyinDialogVisible">

  <el-form :model="formby">
    <el-form-item label="填写用户病因">
    <el-input :rows="4" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" v-model="formby.bingyin"></el-input>
  </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="tijiaoby">提交</el-button>
    <el-button>取消</el-button>
  </el-form-item>
  </el-form>  
  </el-dialog>   
</div>       


<div id="xzbrTable">
<el-dialog  width="1200px" title="选择病人" :visible.sync="huajiaDialogVisible">
     
     <div class="sousuo">
      <el-input  v-model="sou" placeholder="请输入搜索内容" style="width:240px;margin-bottom: 40px;"></el-input>
      <el-button style="margin-left: 20px;" icon="el-icon-search" circle></el-button>
    </div>
 
   <el-table
    :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    border
    >

   <el-table-column
      prop="id"
      label="单据号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="telephone"
       width="180"
      label="电话">
    </el-table-column>
    <el-table-column
     width="180"
      prop="card"
      label="身份证号">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
     width="130"
      prop="departmentname"
      label="科室">
    </el-table-column>
    <el-table-column
      prop="doctorname"
      label="医生">
    </el-table-column>
    <el-table-column
      prop="type"
      label="挂号类别">
    </el-table-column>
    <el-table-column
      prop="date"
      label="挂号时间">
    </el-table-column>
    <el-table-column
      prop="cost"
      label="挂号费">
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="primary" size="small">选择</el-button>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,4,6,10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>

</el-dialog>

</div>




<el-row :gutter="10">
  <div class="chufangTable"   v-if="ypxzisshow">
      <el-col :span="10">
    <div class="xztable">
     <div class="ypsousuo">
      <el-input  v-model="sou" placeholder="请输入搜索内容" style="width:240px;margin-bottom: -10px;"></el-input>
      <el-button style="margin-left: 20px;" icon="el-icon-search" circle></el-button>
    </div>

   <el-table
    :data="yaopinData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    border
    style="width: 500px"
    :header-cell-style="{background:'gainsboro', color:'#000'}"
    >

   <el-table-column
      prop="name"
      label="药品名称"
      >
    </el-table-column>
    <el-table-column
      prop="quantity"
      label="库存"
     >
    </el-table-column>
    <el-table-column
      prop="company"
      
      label="单位">
    </el-table-column>
    <el-table-column
    
      prop="cost"
      label="单价">
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="xuanzeyp(scope.row)" type="primary" size="mini">选择</el-button>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,4,6,10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="yaopinData.length">
    </el-pagination>
 </div>
</el-col>
<div>
    <el-dialog title="选择数量" :visible.sync="xzDialogVisible">
  <el-form :model="formby">
    <el-form-item >
    <el-input :rows="2" v-model="shuliang"></el-input>
  </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="tijiaoxz">提交</el-button>
    <el-button>取消</el-button>
  </el-form-item>
  </el-form>  
  </el-dialog>   
</div>      
 <el-col :span="10">
  <div class="yaopin">
   <el-table
    :data="yaopin.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    border
    style="width: 500px"
    :header-cell-style="{background:'gainsboro', color:'#000'}"
    >

   <el-table-column
      prop="name"
      label="药品名称"
      >
    </el-table-column>
    <el-table-column
      prop="shuliang"
      label="数量"
     >
    </el-table-column>
    <el-table-column
      prop="cost"
     
      label="单价">
    </el-table-column>
    <el-table-column
    
      prop="total"
      label="小计">
    </el-table-column>
     <el-table-column
      fixed="right"
      label="操作"
     >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="primary" size="mini">删除</el-button>
        
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,4,6,10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="yaopin.length">
    </el-pagination>

      </div>
    </el-col>

 </div>
</el-row>
</div>

</template>
<script>

import { ghlist,chaxunid} from "../../api/Department";
import { getList1} from "../../api/DrugTable";

import { addyaopin,getgoumai} from "../../api/Listofnoninpatientdrugs";
import { addyz,sfby} from "../../api/order";
export default {
  data() {
    return {
      bingyinDialogVisible: false,
      huajiaDialogVisible: false,
      ypxzisshow: false,
      xzDialogVisible:false,
      orderType:'病因',
      sou: "",
      userid:1,
      zongji:1,
      shuliang:1,
      pagesize: 2,
      currentPage: 1,
      formInline: {
        name:"",
        card:"",
        age:"",
        departmentname:"",
        doctorname:"",
        telephone:"",
         cost: "",
        region: "",
      },
      formby: {
        bingyin: "",
      },
      tableData: [
        {
        id:'',
        name: "",
        age:'',
        telephone: "",
        card: "",        
        type:'',
        doctorname:'',
        departmentname:'',
        date:'',
        cost:'',
        }
        
      ],
       yaopinData: [
        {
          id:'',
        name:'',
        quantity: "",
        company :'',
        cost: "",
        
        }
        
      ],
      qdData:[
        {
          id:'',
          name:"",
         
          cost:'',
          xiaoji:''
        }
      ],
       yaopin: [
        {
          shuliang:'',
        total:'',
        name: "",
        cost: "",
        
        }
        
      ],
    };
  },
    mounted(){
      this.chaxunguahao();
      this.yplist();
     
    },
  methods: {
    tijiaoby() {
      
      addyz({order:this.formby.bingyin}).then(res=>{
          console.log(res)
      })

    },
    handleSizeChange(pagesize) {
      this.pagesize = pagesize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleClick(row) {
      this.huajiaDialogVisible = false;
      this.ypxzisshow = true;
      this.formInline=row
      
    },
    
    xuanzeyp(row){
     this.xzDialogVisible=true
      this.qdData.cost=row.cost
       this.qdData.id=row.id
        
        
         
      chaxunid({name:this.formInline.name}).then(res=>{  
      
      this.userid=res.result[0].id

      })
      
      
      
    },


    tijiaoxz(){
       this.xzDialogVisible=false;
      this.zongji=this.shuliang*this.qdData.cost;      
        addyaopin({patientId:this.userid,drugId:this.qdData.id,shuliang:this.shuliang,total:this.zongji}).then(res=>{
         console.log("nice!") }).then(()=>{
           getgoumai({patientId:this.userid}).then(res=>{ 
              this.yaopin=res.result
         })
         })
      
    },
   yplist(){
     getList1().then(res=>{
      
        this.yaopinData=res.result
      })
   },
  
       chaxunguahao(){
          ghlist().then(res=>{
           
            this.tableData=res.result
          })
       }
  },
};
</script>

<style scoped>


.mainapp{
  min-width: 700px;
  max-width: 2000px;

  
   
   

}
#formdemo01 {
  margin-top: 30px;
  margin-left: 150px;
  
}

#formdemo01 form {
  padding-left: 20px;
}

.chufangTable {

  margin-top: 40px;
  margin-left:110px;
  width: 1600px;
  height: 300px;
  min-width: 700px;
  max-width: 1600px;
  padding-right: 400px;
}
.xztable {
 
  
  
  width: 500px;
 
      
}
.yaopintable {
  
 
  margin-left: 50px;
  width: 500px;
  
  
 
}
.ypsousuo{

  background-color: gainsboro;
}
</style>